<template>
  <div class="app-container">
    <div ref="echartsRef" style="width: 100%; height: 800px"></div>
  </div>
</template>

<script setup name="Items">
import {
  listItems,
  getItems,
  delItems,
  addItems,
  updateItems,
} from "@/api/items/items";
import { listOrders } from "@/api/orders/orders";
import { listDishes } from "@/api/dishes/dishes";
import * as echarts from "echarts";
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();

const itemsList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderId: null,
    dishId: null,
    quantity: null,
    price: null,
  },
  rules: {
    quantity: [
      { required: true, message: "菜品数量不能为空", trigger: "blur" },
    ],
    price: [{ required: true, message: "菜品单价不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

const orderList = ref([]);
const shopList = ref([]);

let myChart = null;
const echartsRef = ref(null);

/** 查询订单项表列表 */
const getList = async () => {
  loading.value = true;
  const response = await listItems(queryParams.value);
  const result = Object.values(
    response.rows.reduce((acc, item) => {
      const dishId = item.dishId;
      if (!acc[dishId]) {
        acc[dishId] = { ...item, quantity: Number(item.quantity) }; // 初始化并转换 num 为数字
      } else {
        acc[dishId].quantity += Number(item.quantity); // 累加 num
      }
      return acc;
    }, {})
  );

  result.map(async (item) => {
    const res = await findShopById(item.dishId);
    item.xname = res;
  });
  setTimeout(() => {
    initChart(result);
  }, 1000);
  itemsList.value = response.rows;
  total.value = response.total;
  loading.value = false;
};

getList();

const handleResize = () => myChart?.resize();
const initChart = (data) => {
  myChart.setOption({
    title: { text: "销售情况", left: "center" },
    xAxis: {
      type: "category",
      data: data.map((item) => item.xname),
    },
    yAxis: {
      name: "数量",
      type: "value",
    },
    series: [
      {
        data: data.map((item) => item.quantity),
        type: "bar",
      },
    ],
  });
};

onMounted(() => {
  myChart = echarts.init(echartsRef.value);
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart?.dispose();
});

// 获取订单列表
const getOrderList = async () => {
  const response = await listOrders();
  orderList.value = response.rows;
};

getOrderList();

// 获取菜品列表
const getShopList = async () => {
  const response = await listDishes();
  shopList.value = response.rows;
};
getShopList();

// 根据id查询菜品名称
const findShopById = async (id) => {
  const response = await listDishes();
  const current = response.rows.filter((v) => v.dishId == id)[0];
  return current.name;
};

// 选中菜品
const selectDish = (value) => {
  const current = shopList.value.filter((v) => v.dishId === value)[0];
  form.value.price = current.price;
};
</script>
